<template>
  <div id="UserCenterMessage">
    <div class="message-wrap">
      <div class="message-top-tab">
        <el-button type="custom" size="small" @click="sendMessage"
          >写信</el-button
        >
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="收件箱" name="1"></el-tab-pane>
          <el-tab-pane label="发件箱" name="2"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="search">
        <el-row :gutter="20" type="flex">
          <el-col :span="6">
            <el-input
              placeholder="请输入标题"
              v-model="listQuery.title"
              clearable
            >
            </el-input>
          </el-col>
          <el-col :span="6">
            <el-button type="custom" @click="getList()" plain>搜索</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="msgDataList">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="title" label="标题" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <b
                class="message-title"
                @click="handlePreview(row)"
                v-if="row.isRead == 0"
              >
                {{ row.title }}
              </b>
              <p class="message-title" @click="handlePreview(row)" v-else>
                {{ row.title }}
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="createBy"
            label="发送人"
            v-if="activeName == 1"
            width="100"
          >
            <template slot-scope="scope">
              <p v-if="scope.row.sysUser">{{ scope.row.sendUser.userName }}</p>
            </template>
          </el-table-column>

          <el-table-column
            prop="createBy"
            label="收件人"
            v-if="activeName == 2"
            width="100"
          >
            <template slot-scope="scope">
              <p>{{ getUserName(scope.row.receiveUserList) }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="发送时间" width="180">
          </el-table-column>
          <el-table-column label="操作" width="160">
            <template slot-scope="{ row }">
              <el-button-group>
                <el-button
                  type="success"
                  size="mini"
                  @click="handlePreview(row)"
                  class="jurisdiction"
                  >查看私信</el-button
                >
                <el-button
                  type="danger"
                  size="mini"
                  @click="handleDelete(row)"
                  class="jurisdiction"
                  >删除</el-button
                >
              </el-button-group>
            </template>
          </el-table-column>
          <div slot="empty" class="emptyBg">
            <el-empty :image-size="200"></el-empty>
          </div>
        </el-table>
        <Pagination
          v-show="parseInt(pageObj.count) > 0"
          :total="parseInt(pageObj.count)"
          @change="getList"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
        />
      </div>
    </div>
  </div>
</template>
<script>
import {
  sysQueryNoticeByOneSelf,
  sysReadNotice,
  sysNoticeQuery,
  sysNoticeDeleteByOneSelf,
  sysNoticeDeleteById,
} from '@/api/admin/system/sysNotice.js'
export default {
  data() {
    return {
      activeName: '1',
      listQuery: {
        title: '',
        page: 1,
        limit: 10,
        type: 2,
      },
      pageObj: {},
      tableData: [],
    }
  },
  mounted() {
    this.getList()
    this.$bus.$on('refreshMsgList', this.getList)
  },
  beforeDestroy() {
    this.$bus.$off('refreshMsgList')
  },
  methods: {
    // 获取数据
    getList() {
      if (this.activeName == '1') {
        this.getNoticeByOneSelf()
      } else {
        this.getSysNoticeQuery()
      }
    },
    // 查询收件信息
    getNoticeByOneSelf() {
      sysQueryNoticeByOneSelf(this.listQuery).then((res) => {
        this.tableData = res.data.data
        this.pageObj = res.data
      })
    },
    //阅读一条消息表信息
    readNotice(v) {
      if (v.isRead == 1) return
      sysReadNotice(v.id).then((res) => {
        this.getList()
      })
    },
    // 查询已发信息
    getSysNoticeQuery() {
      let data = {
        type: 2,
        createBy: this.$store.getters.userId,
        page: this.listQuery.page,
        limit: this.listQuery.limit,
        title: this.listQuery.title,
      }
      sysNoticeQuery(data).then((res) => {
        this.tableData = res.data.data
        this.pageObj = res.data
      })
    },
    getUserName(item) {
      let userName = ''
      if (item) {
        userName = item.filter((v) => v && v.userName).map((v) => v.userName)
        userName = userName.toString()
      }
      return userName
    },
    //点击tab切换类型
    handleClick() {
      this.listQuery.page = 1
      this.getList()
    },
    //点击出现选人弹窗
    sendMessage() {
      this.$bus.$emit('sendMessageTo')
    },
    //查看私信
    handlePreview(row) {
      this.readNotice(row)
      this.$bus.$emit('showMessageInfo', row)
    },
    //删除确认
    handleDelete(row) {
      this.deleteTips(() => {
        this.activeName == 1 ? this.deleteInbox(row) : this.deleteOutbox(row)
      })
    },
    //删除收件箱
    deleteInbox(row) {
      sysNoticeDeleteByOneSelf({ ids: row.id }).then((res) => {
        this.getList()
        this.successMsg('操作成功')
      })
    },
    //删除发件箱
    deleteOutbox(row) {
      sysNoticeDeleteById(row.id).then((res) => {
        this.getList()
        this.successMsg('操作成功')
      })
    },
    //重置表单
    resetForm(form) {
      this.$refs[form].resetFields()
    },
  },
}
</script>
<style scoped lang="scss">
#UserCenterMessage {
  .message-wrap {
    .message-top-tab {
      position: relative;
      button.el-button.el-button--custom.el-button--small {
        position: absolute;
        right: 0;
        z-index: 2;
      }
    }
  }
  .msgDataList {
    .message-title {
      cursor: pointer;
      &:hover {
        color: var(--colorH1);
      }
    }
  }
}
</style>